خاصية @property في CSS: أطلق العنان لقوة الخصائص المخصصة

أحدثت الخصائص المخصصة في CSS (المعروفة أيضًا باسم متغيرات CSS) ثورة في طريقة كتابة وإدارة CSS. فهي تسمح لنا بتعريف قيم قابلة لإعادة الاستخدام يمكن تطبيقها في جميع أوراق الأنماط الخاصة بنا، مما يجعل شيفرتنا أكثر قابلية للصيانة وأسهل في التحديث. ولكن ماذا لو كان بإمكانك تجاوز مجرد استبدال القيم البسيطة وتحديد النوع، والصيغة، والقيمة الأولية، وسلوك الوراثة لخصائصك المخصصة؟ هنا يأتي دور @property. سيستكشف هذا الدليل قوة وإمكانات قاعدة @property، ويزودك بالمعرفة والأمثلة للاستفادة منها في مشاريعك.

ما هي خاصية @property في CSS؟

قاعدة @property هي إضافة قوية إلى CSS تسمح لك بتعريف الخصائص المخصصة بشكل صريح. على عكس متغيرات CSS القياسية التي يتم التعامل معها أساسًا كسلاسل نصية، تتيح لك @property تحديد نوع البيانات، والصيغة، والقيمة الأولية، وما إذا كانت الخاصية ترث قيمتها من عنصرها الأب. وهذا يفتح إمكانيات مثيرة للتحريك والتحقق من الصحة والتحكم الشامل في خصائصك المخصصة.

بشكل أساسي، تمنح @property متغيرات CSS قوى خارقة.

لماذا نستخدم @property؟

بينما تكون متغيرات CSS القياسية مفيدة للغاية، إلا أن لها قيودًا. فكر في هذه السيناريوهات حيث تتألق @property:

• التحريك والانتقالات: لا يمكن تحريك متغيرات CSS القياسية، كونها تُعامل كسلاسل نصية، بسلاسة بين أنواع مختلفة من القيم (على سبيل المثال، من رقم إلى لون). تتيح لك @property تحديد نوع المتغير، مما يتيح انتقالات وتحريكات سلسة. تخيل تحريك خاصية مخصصة تمثل تدرج لون؛ مع متغير CSS قياسي، سيتطلب هذا حيلًا باستخدام JavaScript، ولكن مع @property وتحديد الصيغة كـ <color>، يمكن للمتصفح التعامل مع التحريك أصلاً.
• التحقق من النوع: يمكنك التأكد من أن الخاصية المخصصة تقبل فقط قيمًا من نوع معين (مثل <number>، <color>، <length>). يساعد هذا في منع الأخطاء ويضمن أن يكون CSS الخاص بك أكثر قوة. إذا حاولت تعيين قيمة غير صالحة، فسيستخدم المتصفح القيمة الأولية المحددة. هذا أكثر موثوقية بكثير من الاعتماد على ظهور الأخطاء المحتملة لاحقًا في التطوير.
• القيم الافتراضية والوراثة: تتيح لك @property تحديد قيمة أولية للخاصية والتحكم في سلوك وراثتها. هذا يبسط CSS الخاص بك ويجعله أكثر قابلية للتنبؤ. يصبح تحديد قيم أولية واضحة ضروريًا للمشاريع المعقدة، مما يمنع حدوث أخطاء بصرية غير مقصودة عندما لا يتم تعيين خاصية مخصصة بشكل صريح.
• تحسين قابلية قراءة وصيانة CSS: إن تحديد خصائصك المخصصة بشكل صريح باستخدام @property يجعل CSS الخاص بك أسهل في الفهم والصيانة، خاصة في المشاريع الكبيرة. فهو يعمل كتوثيق ذاتي، مما يوضح الغرض من الخاصية المخصصة وكيفية استخدامها.

صيغة @property

تتبع قاعدة @property هذه الصيغة الأساسية:

            @property --property-name {
 syntax: <value>;
 inherits: <boolean>;
 initial-value: <value>;
}

            

              
                Copy
              
            
          

دعنا نحلل كل جزء من الصيغة:

• --property-name: هذا هو اسم خاصيتك المخصصة. يجب أن يبدأ بشرطتين (--). على سبيل المثال، --primary-color.
• syntax: يحدد هذا نوع القيمة التي يمكن أن تقبلها الخاصية. يستخدم نفس صيغة أنواع <value> في CSS، مثل <color>، <number>، <length>، <percentage>، <url>، <integer>، والمزيد. يمكنك أيضًا استخدام حرف البدل * للسماح بأي قيمة.
• inherits: هذه قيمة منطقية (boolean) تحدد ما إذا كانت الخاصية ترث قيمتها من عنصرها الأب. يمكن أن تكون إما true أو false.
• initial-value: هذه هي القيمة الافتراضية للخاصية. يجب أن تكون قيمة صالحة وفقًا للصيغة المحددة.

أمثلة عملية على @property

دعنا نلقي نظرة على بعض الأمثلة العملية لكيفية استخدام @property لتعزيز CSS الخاص بك.

مثال 1: تحريك لون

تخيل أنك تريد تحريك لون خلفية زر. مع متغيرات CSS القياسية، يمكن أن يكون هذا صعبًا. ولكن مع @property، يصبح الأمر مباشرًا:

            @property --button-bg-color {
 syntax: <color>;
 inherits: false;
 initial-value: #007bff;
}

.button {
 background-color: var(--button-bg-color);
 transition: --button-bg-color 0.3s ease;
}

.button:hover {
 --button-bg-color: #28a745;
}

            

              
                Copy
              
            
          

في هذا المثال، نحدد خاصية مخصصة تسمى --button-bg-color بصيغة <color>. هذا يخبر المتصفح أن الخاصية يجب أن تكون دائمًا قيمة لون. عند تمرير الفأرة فوق الزر، ينتقل اللون بسلاسة من الأزرق الأولي (#007bff) إلى الأخضر (#28a745).

مثال 2: تحريك رقم

لنفترض أنك تريد تحريك عرض شريط تقدم. إليك كيف يمكنك القيام بذلك باستخدام @property:

            @property --progress-width {
 syntax: <percentage>;
 inherits: false;
 initial-value: 0%;
}

.progress-bar {
 width: var(--progress-width);
 height: 10px;
 background-color: #4CAF50;
 transition: --progress-width 0.5s ease-in-out;
}

.progress-bar.complete {
 --progress-width: 100%;
}

            

              
                Copy
              
            
          

هنا، نحدد خاصية مخصصة تسمى --progress-width بصيغة <percentage>. تم تعيين القيمة الأولية على 0%. عند إضافة فئة .complete إلى شريط التقدم، يتم تحريك العرض بسلاسة إلى 100%.

مثال 3: التحقق من قيمة طول

يمكنك استخدام @property للتأكد من أن الخاصية المخصصة تقبل قيم الطول فقط:

            @property --spacing {
 syntax: <length>;
 inherits: true;
 initial-value: 10px;
}

.element {
 margin: var(--spacing);
}

.element.large {
 --spacing: 20px; /* Valid */
}

.element.invalid {
 --spacing: red; /* Invalid - will revert to initial-value */
}

            

              
                Copy
              
            
          

في هذه الحالة، يتم تعريف --spacing بصيغة <length>. إذا حاولت تعيين قيمة ليست من نوع الطول (مثل red)، فسيتجاهلها المتصفح ويستخدم القيمة الأولية (10px).

مثال 4: تعريف ظل مخصص

يمكنك تعريف خاصية معقدة مثل ظل الصندوق باستخدام حرف البدل في الصيغة. المقايضة هي أن التحقق من النوع يكون أقل، لذلك يجب عليك التأكد من أنها تتبع الصيغة والبنية الصحيحة.

            @property --my-shadow {
 syntax: *;
 inherits: false;
 initial-value: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-box {
 box-shadow: var(--my-shadow);
}

.shadow-box:hover {
 --my-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
 transition: --my-shadow 0.3s ease;
}

            

              
                Copy
              
            
          

اعتبارات عالمية وأفضل الممارسات

عند استخدام @property في مشاريع مخصصة لجمهور عالمي، ضع هذه الاعتبارات في الحسبان:

• إمكانية الوصول: تأكد من أن أي تحريكات أو انتقالات تم إنشاؤها باستخدام @property لا تسبب مشكلات في إمكانية الوصول للمستخدمين ذوي الإعاقة. وفر خيارات لتعطيل التحريكات إذا لزم الأمر. تذكر أن المستخدمين في أجزاء مختلفة من العالم قد يكون لديهم مستويات متفاوتة من الاتصال بالإنترنت وقدرات الأجهزة. تجنب التحريكات المعقدة بشكل مفرط التي قد تؤثر سلبًا على الأداء في الأجهزة ذات المواصفات المنخفضة.
• التدويل (i18n) والتوطين (l10n): فكر في كيفية تفاعل الخصائص المخصصة مع اللغات والسياقات الثقافية المختلفة. إذا كنت تستخدم خصائص مخصصة للتحكم في التخطيط أو الطباعة، فتأكد من أن تصميمك يتكيف بشكل مناسب مع اتجاهات النص ومجموعات الأحرف المختلفة. على سبيل المثال، قد يحتاج اتجاه نص شريط التقدم إلى التغيير في اللغات التي تكتب من اليمين إلى اليسار (RTL).
• الأداء: بينما يمكن لـ @property تحسين الأداء من خلال تمكين تحريكات CSS الأصلية، لا يزال من المهم تحسين شيفرتك. تجنب الحسابات غير الضرورية أو التحريكات المعقدة التي قد تبطئ الصفحة. اختبر شيفرتك على أجهزة ومتصفحات مختلفة للتأكد من أنها تعمل بشكل جيد عبر مجموعة من المنصات.
• توافق المتصفحات: تحقق من توافق المتصفحات قبل استخدام @property في بيئة الإنتاج. على الرغم من أن الدعم قد تحسن بشكل كبير، فمن المهم التأكد من أن شيفرتك تتراجع برشاقة في المتصفحات القديمة التي لا تدعم هذه الميزة. استخدم استعلامات الميزات (@supports) لتوفير أنماط احتياطية عند الضرورة. اعتبارًا من أواخر عام 2024، أصبح دعم المتصفحات جيدًا جدًا، حيث تدعم جميع المتصفحات الرئيسية هذه الميزة.
• اصطلاحات التسمية: اعتمد اصطلاحات تسمية واضحة ومتسقة لخصائصك المخصصة. سيجعل هذا شيفرتك أسهل في الفهم والصيانة، خاصة عند العمل في فريق. استخدم أسماء وصفية تشير بوضوح إلى الغرض من الخاصية. على سبيل المثال، بدلاً من --color، استخدم --primary-button-color.
• التوثيق: قم بتوثيق خصائصك المخصصة بدقة، خاصة عند العمل في مشاريع كبيرة أو مع فريق. اشرح الغرض من كل خاصية، وصيغتها، وقيمتها الأولية، وأي تبعيات أو تفاعلات مع خصائص أخرى. سيساعد هذا المطورين الآخرين على فهم واستخدام شيفرتك بفعالية.
• السمات والعلامات التجارية: استخدم @property لإنشاء سمات مرنة وقابلة للتخصيص لموقعك أو تطبيقك. حدد خصائص مخصصة للألوان والخطوط والمسافات وعناصر التصميم الأخرى، واسمح للمستخدمين بالتبديل بسهولة بين السمات المختلفة عن طريق تعديل هذه الخصائص. يمكن أن يكون هذا مفيدًا بشكل خاص للمؤسسات ذات العلامات التجارية العالمية التي تحتاج إلى الحفاظ على الاتساق عبر مختلف المناطق واللغات.

أفضل الممارسات لاستخدام @property

فيما يلي بعض أفضل الممارسات التي يجب اتباعها عند استخدام @property:

• كن صريحًا: حدد دائمًا خصائصك المخصصة باستخدام @property بدلاً من الاعتماد على المتغيرات الضمنية القائمة على السلاسل النصية. يوفر هذا الوضوح والتحقق وقدرات التحريك.
• اختر الصيغة الصحيحة: اختر الصيغة الأنسب لكل خاصية لضمان سلامة النوع وسلوك التحريك المناسب.
• وفر قيمًا أولية: عيّن دائمًا قيمة أولية لخصائصك المخصصة. يمنع هذا السلوك غير المتوقع إذا لم يتم تعيين الخاصية بشكل صريح.
• ضع الوراثة في الاعتبار: فكر بعناية فيما إذا كان يجب أن ترث الخاصية قيمتها من عنصرها الأب. استخدم inherits: true عند الاقتضاء، ولكن كن على دراية بالآثار الجانبية المحتملة.
• استخدم أسماء ذات معنى: اختر أسماء وصفية لخصائصك المخصصة لجعل شيفرتك أسهل في الفهم والصيانة.
• وثق شيفرتك: أضف تعليقات إلى CSS الخاص بك لشرح الغرض من كل خاصية مخصصة وكيفية استخدامها.
• اختبر بدقة: اختبر شيفرتك في متصفحات وأجهزة مختلفة لضمان التوافق والأداء.

توافق المتصفحات

اعتبارًا من أواخر عام 2024، أصبحت @property مدعومة في جميع المتصفحات الرئيسية، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، من الجيد دائمًا التحقق من أحدث معلومات توافق المتصفحات على مصادر مثل Can I use قبل استخدام @property في بيئة الإنتاج.

بالنسبة للمتصفحات القديمة التي لا تدعم @property، يمكنك استخدام استعلامات الميزات (@supports) لتوفير أنماط احتياطية. على سبيل المثال:

            @supports (--custom-property: initial) {
 /* Styles for browsers that support custom properties */
}

@supports not (--custom-property: initial) {
 /* Fallback styles for older browsers */
}

            

              
                Copy
              
            
          

الخاتمة

خاصية @property في CSS هي أداة قوية يمكنها تحسين سير عملك في CSS بشكل كبير. من خلال السماح لك بتحديد النوع والصيغة والقيمة الأولية وسلوك الوراثة لخصائصك المخصصة، فإنها تفتح إمكانيات جديدة للتحريك والتحقق والتحكم الشامل في أنماطك. من خلال فهم صيغتها وقدراتها وأفضل الممارسات، يمكنك الاستفادة من @property لإنشاء تصميمات ويب أكثر قوة وقابلية للصيانة وجاذبية بصرية. تذكر أن تضع في اعتبارك الآثار العالمية عند استخدام @property، مما يضمن إمكانية الوصول والتدويل والأداء لجمهور متنوع.

لذا، احتضن قوة @property واطلق العنان للإمكانات الكاملة للخصائص المخصصة في CSS في مشروعك القادم!